* {margin:0; padding:0;}


body {
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  	overflow-x:hidden;
	background:#FAFAFA;
}

/*cabeçalho */

header {
	width:100%;
	height:50px;
	position:fixed;
	top:0;
	z-index:500;
	background-color:#06F;
	}
	
/*menu do cabeçalho*/	
#config {
	position:relative;
	margin-left:95%;
	margin-top:5px;
	cursor:pointer;
}

a.menu {
  display: block;
  width: 30px;
  float:left;
  margin-left:3%;
  margin-top:1px; }
  a.menu .bar {
    background-color: #FFF;
    display: block;
    height: 5px;
    width: 100%;
    margin: 6px 0;
	margin-left:8px; }
/*fim do menu*/

div#logo {
	position:absolute;
	float:left;	
}

/* resultado da pesquisa*/
div#resultado{
	position:absolute;
	padding:5px;
	width:437px;
	background:#fff;
	border:1px solid #ccc;
	margin-left:362px;
	margin-top:40px;
}

div#resultado ul{float:left; list-style-type:none;}

div#resultado ul li{
	display:block;
	padding:12px;
	background:#fff;
	width:410px;
	border-bottom:1px solid #ccc;
	margin-bottom:10px;
}
div#resultado ul li span{
	font:16px "Trebuchet MS";
	color:#09f;
}
div#resultado ul li:hover{background:#f4f4f4;}

div#resultado ul li p{font:14px tahoma, arial, helvetica; color:#666;}

/*campo de pesquisa*/
.search {
	width:400px;
	height:30px;
	float:left;
	margin-left:-67%;
	margin-top:0.4%;
	border:1px solid #DEDEDE;
	border-left:none;
	text-indent:0.5em;
	font-family: "Montserrat", sans-serif;
	font-size:14px;
	color:#666;
	outline:none;
	position:absolute;
}
/*fim do campo de pesquisa*/

/*botão de pesquisa (Q)*/
#sub {
	width:50px;
	height:30px;
	margin-left:-70.5%;
	margin-top:0.4%;
	border:1px solid #D7D7D7;
	border-right:none;
	background:url(../images/lupa_icon.png) no-repeat #FFF 5px;
	text-indent:2.5em;
	font-family: "Montserrat", sans-serif;
	font-size:18px;
	font-weight:bold;
	color:#666;
	cursor:pointer;
	outline:none;
	position:absolute;
}
/*fim do botão*/	

/*dados do usuario flutuando a direito do cabeçalho*/
#user {
	display:block;
	margin-left:80%;
	margin-top:3%;
	cursor:text;
	position:absolute;
}	
/*fim do cabeçalho**/


/*contatos da rede*/

div#contatos {
	width:220px;
	border-right:1px solid #004080;
	background:#FFF;
	position:fixed;
	left:0;
	top:50px;
	height:816px;
	overflow-y:auto;
	overflow-x:hidden;
}
	
div#contatos ul {
	list-style-type:none;
	margin:0;
	width:100%;
}	
	
div#contatos ul li {
	float:left;
	display:block;
	width:100%;
	margin-bottom:1px;
}	
	
div#contatos ul li span.type {
	float:right;
	padding:5px;
	margin:8px;
	margin-top:15px;
	background:#DEDEDE;
	border-radius:5px;
}

div#contatos ul li span.type.on{
	background:#0F3;	
}

div#contatos ul li span.type.off{
	background:#DEDEDE;	
}

div#contatos ul li a{
	text-decoration:none;
	display:block;
	padding:10px;
	font-weight:bold;
	font-size:14px;
	color:#06F;
	}	
	
div#contatos ul li a:hover {
	background-color:#FAFAFA;
	-webkit-transition-duration:0.5s;
	-moz-transition-duration:0.5s;
	-o-transition-duration:0.5s;
	}	
	
/*fim dos contatos*/
	
/*abas do chat*/
div#janelas {
	position:fixed;
	bottom:0;
	left:230px;
	width:85%;
	z-index:500;
}	
	
div#janelas div.janela {
	width:260px;
	background:#FFF;
	margin-right:10px;
	float:left;
	margin-bottom:0;
}	
	
div.janela div.topo {
	float:left;
	width:260px;
	background-color:#06F;
	font:bold;
	height:25px;
	cursor:pointer;
}	
	
div.topo.fixar {position:absolute; bottom:0;}

div.topo span {
	float:left;
	color:#FFF;
	margin:4px;
	font-size:14px;
}	

div.janela div.topo a#fechar {
	float:left;
	padding:5px 6px;
	height:19px;
	color:#FFF;
	font-size:14px;
	font-weight:bold;
	float:right;
	text-decoration:none;
}		
	
div.janela textarea {
	padding:3px;
	border:none;
	border-right:1px solid #999;
	border-left:1px solid #999;
	outline:none;
	background:#FFF;
	color:#333;
	width:260px;
	height:25px;
	resize:none;
	word-wrap:break-word;
}	
	
div.mensagens {
	float:left;
	width:258px;
	background:#FAFAFA;
	height:230px;
	border-bottom:1px solid #999;
	border-left:1px solid #999;
	border-right:1px solid #999;
}	
	
div.mensagens ul.listar {
	list-style-type:none;
	float:left;
	width:258px;
	background:#FAFAFA;
	border:none;
	height:230px;
	overflow-y:auto;
	overflow-x:hidden;
}	
	
div.mensagens ul.listar li {
	float:left;
	clear:both;
	width:auto;
	margin-top:5px;
	margin-left:5px;
	margin-right:5px;
	background-color:#06F;
	border:none;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	margin-bottom:5px;
	padding-bottom:4px;
}	
	
div.mensagens ul.listar li p {
	font:14px Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	color:#FFF;
	float:left;
	width:100%;
	margin-left:3px;
	margin-right:3px;
}
	
div.mensagens ul li span {
	font:15px Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight:bold;
	color:#FFF;
	float:left;
	width:auto;
	margin-left:3px;
	margin-right:3px;
}
	
/*fim do bate papo */

/*div oculta do lado esquerdo do site */
#visualizar {
	width:222px;
	height:135%;
	position:fixed;
	background:#FFF;
	border:none;
	border-left:1px solid #004080;
	z-index:999;	
	top:50px;
	right:0;
}	

/*div contendo o (<-) para ocultar a div*/
#ocultar {
	width:40px;
	height:40px;
	position:fixed;
	background:#06F;
	margin-left:95%;
	margin-top:-13px;
	cursor:pointer;
	z-index:999;
}	

#ocultar:hover {cursor:pointer;}

h1 {text-align:center;color:#FFF;}

/*menu dentro da div oculta */
nav {
	display:block;	
}

nav ul {
	list-style-type:none;
	margin:0;
	margin-top:70%;
	margin-bottom:5px;
	width:100%;
	}	
	
nav ul li {
	display:block;
	width:100%;
	margin-bottom:1px;
	}	
	
nav ul li a{
	text-decoration:none;
	display:block;
	padding:5px;
	font-size:18px;
	font-weight:500;
	color:#004080;
	}	
	
nav ul li a:hover {
	color:#FFF;
	background-color:#06F;
	-webkit-transition-duration:0.5s;
	-moz-transition-duration:0.5s;
	-o-transition-duration:0.5s;
	}	
/*fim do menu*/

/*dados do usuario flutuando a direita abaixo do cabeçalho*/

img#usuario {	
	width:120px;
	height:120px;
	border-radius:100%;
	-webkit-border-radius:100%;
	-moz-border-radius:100%;
	margin-top:10px;
	margin-left:40px;	
	position:absolute;
}	

.window{
    width:400px;
    height:400px;
    position:absolute;
    margin-left:30%;
	margin-top:10px;
    z-index:9900;
    padding:10px;
	border:5px solid #900;
	background-image: linear-gradient(to bottom, #F1F1F1);
	background:#FFF;
}

/** Page */
#page{width:500px; margin:30px auto 0;}

/** Box */
#page .box{margin-bottom:1px; border:1px solid #900; color:#333; font:14px "Trebuchet MS", Arial, Helvetica, sans-serif; }
#page .box .title{padding:15px; background:#F00; color:#FFF; font-weight:bold;}
#page .box .title:hover{cursor:pointer; background:#900;}
#page .box .container{padding:20px; line-height:150%;}

/** Classe para ocultar os containers */
#page .box .hide{display:none;}
 
#mascara{
    display:none;
    position:absolute;
    left:0;
    top:0;
    z-index:9000;
    background-color:#000;
}

/*Edição dos campo dentro da div window e dos containers*/
.camp{
	margin-top: 4px;
	padding: 10px;	
	width:90%;
	border: 1px solid #CCC;
	-webkit-appearance: textfield;
	-moz-appearance:textfield;
	-webkit-box-sizing: content-box;
	  -moz-box-sizing : content-box;
	       box-sizing : content-box;
	-webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
	   -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
	        box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
	-webkit-transition: all 0.2s linear;
	   -moz-transition: all 0.2s linear;
	     -o-transition: all 0.2s linear;
	        transition: all 0.2s linear;	
}

.camp:focus{
	outline:#900;
	border: 1px solid #900;
	background: rgba;	
}

.bot{
	margin-top: 4px;
	padding: 10px;	
	background-color:#900;
	color:#FFF;
	border: 1px solid #CCC;
	-webkit-appearance: textfield;
	-webkit-box-sizing: content-box;
	  -moz-box-sizing : content-box;
	       box-sizing : content-box;
	-webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
	   -moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
	        box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
	-webkit-transition: all 0.2s linear;
	   -moz-transition: all 0.2s linear;
	     -o-transition: all 0.2s linear;
	        transition: all 0.2s linear;

}

.bot:focus{
	outline:#F4F4F4;
	border: 1px solid #3CF;
	background: rgba;	
}
/*fim da edição dos campos*/

/*link para fechar a div window (X)*/ 
.fechar{display:block; text-align:right;}

a.fechar {color:#900;opacity:0.8;text-decoration:none;} 
/*fim do link fechar*/

/*Postagens que recebe o postar*/
#post {
	width:61.2%;
	height:90%;
	position:absolute;
	margin-left:20%;
	margin-top:2%;
	border-radius:5px;
	overflow-y:auto;
	overflow-x:hidden;	
}

/*campo que o usuario digita seu texto*/

#postar {
	width:61.2%;
	height:12%;
	position:absolute;
	margin-left:20%;
	margin-top:5%;
	background-color:#FFF;
	border:1px solid #06F;
	outline:none;
	resize:none;
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size:16px;	
	color:#666;
	text-indent:0.5em;
	padding:5px 2px;
}

.publicar {
	position:relative;
	margin-left: 73.2%;
	margin-top:11%;
	margin-bottom: 10px;
	width: 8%;
	height: 5%;
	cursor: pointer;	
	border:none;
	border-radius:3px;
	padding: 2px 2px;
	color: #FFF;
	font-weight:600;
	font-size: 16px;	
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	background-color: #004080;	
}

.postagem {
	width:auto;
	height:auto;
	border:1px solid #06F;
	margin:5px;
	padding:5px;
	margin-top:15px;
	background-color:rgb(254,254,254);	
}

/*rodape do site */
footer {
	width:100%;
	height:120px;
	position:absolute;
	margin-top:65%;
	background-color:#EEE;
	border-top:5px solid #CCC;	
	border-left:2px solid #CCC;
}